<template>
    <div id="addNewRoleView">
        <el-dialog
        title="新增角色"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <table class="table">
            <tbody>
                <tr>
                    <td>角色名称</td>
                    <td>
                        <!-- <el-input v-model="formData.roleName"></el-input> -->
                            <input name="角色名称" v-model="formData.roleName" 
                            v-validate="'required|alpha'" 
                            :class="{'input': true, 'is-danger': errors.has('角色名称') }" 
                            type="text" placeholder="角色名称">
                            <i v-show="errors.has('角色名称')" 
                            class="fa fa-warning"></i>
                            <span v-show="errors.has('角色名称')" class="help is-danger">{{ errors.first('角色名称') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>是否启动</td>
                    <td>
                        <el-switch
                            v-model="formData.status"
                            active-text="开"
                            inactive-text="关">
                        </el-switch>
                    </td>
                </tr>
                <tr>
                    <td>角色描述</td>
                    <td>
                        <el-input v-model="formData.description"></el-input>
                    </td>
                </tr>
            </tbody>
        </table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false,backToRoleManage()">取 消</el-button>
            <el-button type="primary" @click="addNewRole()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data(){
        return {
            dialogVisible: true,
            formData: {
                roleName: '',
                status: true,
                description: ''
            }
        }
    },
    methods: {
        backToRoleManage(){
            this.$router.go(-1);
        },
        addNewRole(){
             var checkedDdataArra = ["roleName","status"];
            var goon = this.checkData(checkedDdataArra,this.formData);
            if(!goon){
                return;
            }    
            var url = window.baseURL+"/backstage/role/insert";
            this.formData.status = Number(this.formData.status);
            this.formData.token = this.$token;
            this.$http.post(url,qs.stringify(this.formData))
            .then((response)=>{
                this.dialogVisible = false;
                this.$router.go(-1);            
            })                 
            .catch((error)=>{
            })
        },
        handleClose(){
            this.$router.go(-1);            
        }
    }
}
</script>

<style lang="scss" scoped>
    #addNewRoleView{
        .table {
            tbody {
                tr {
                    td {
                        border: none;
                    }
                }
            }
        }
    }
</style>
